const path = require('path');
const Webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 解构引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const vueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
  mode: 'development', // 开发模式 // 生产模式
  entry: path.resolve(__dirname, './src/main.js'),    // 入口文件
  output: {
    filename: '[name].[hash:8].js',      // 打包后的文件名称
    path: path.resolve(__dirname, './dist')  // 打包后的目录
  },
  module: {
    rules: [
      // {
      //   test: /\.(c|sc|sa)ss$/,
      //   use: ['vue-style-loader', 'css-loader', 'sass-loader'] // 从右向左解析原则
      // },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.(c|sc|sa)ss$/,
        use: ['vue-style-loader', 'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }, 'sass-loader'
        ]
      }
    ]
  },
  resolve: {
    // 别名配置
    alias: {
      'vue$': 'vue/dist/vue.runtime.esm.js',
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['*', '.js', '.json', '.vue']
  },
  devServer: {
    port: 8080,
    hot: true,
    contentBase: './dist'
  },
  plugins: [
    // 热更新的插件
    new Webpack.HotModuleReplacementPlugin(),
    new vueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html')
    }),
    new MiniCssExtractPlugin({
      filename: "style.[hash:8].css",
      chunkFilename: "[id].css",
    }),
    new CleanWebpackPlugin(),
  ]
}